<template>
  <div>
    <div class="top-content">
      <!-- 统计内容 -->
      <div class="left-div">
        <div class="flex-wrap">
          <div
            v-for="(item, i) in totals"
            :key="i"
            class="wrap-content"
            :style="`background: ${item.color};width: 155px;height: 78px;`"
          >
            <PublicImage
              :src="item.icon"
              class="iconStyle"
            ></PublicImage>
            <div class="tip">
              <div :style="`color: #fff;font-size: 20px;`">{{ item.num }}</div>
              <div style="color: #fff; font-size: 12px">{{ item.text }}</div>
            </div>
          </div>
        </div>
        <div style="margin-top: 50px" v-for="(item, i) in statistics" :key="i">
          <ContainerTitle :text="item.title" :more="true" @jump="gotoList(item.link)"></ContainerTitle>
          <div class="flex-wrap">
            <div v-for="(it, i) in item.list" :key="i" class="wrap-content">
              <PublicImage
                :src="it.icon"
                class="iconStyle"
              ></PublicImage>
              <div class="tip">
                <div :style="`color: ${item.color};font-size: 20px;`">{{ it.num }}</div>
                <div style="color: #666666; font-size: 12px">{{ it.text }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 政策推荐 -->
      <div class="right-div">
        <ContainerTitle text="政策推荐" :more="true" @jump="gotoList('policyRecommend')"></ContainerTitle>
        <policyFrame
          class="policyDiv"
          v-for="(policy, index) in policys"
          :policy="policy"
          :index="index"
          :key="policy.id"
        ></policyFrame>
        <!-- </div> -->
      </div>
    </div>
    <!-- 在线课程区域 -->
    <ContainerTitle text="在线课程" class="title"></ContainerTitle>
    <div class="videoList">
      <videoFrame
        class="videoFrame"
        v-for="video in onlineCourseList"
        :video="video"
        :url="'onlineCourseDetail'"
        :key="video.id"
      ></videoFrame>
    </div>
    <!-- 人才推荐区域 -->
    <ContainerTitle text="人才推介" class="title"></ContainerTitle>
    <div class="talentList">
      <talentFrame v-for="(talent, index) in talentList" :talent="talent" :key="index"></talentFrame>
    </div>
  </div>
</template>

<script>
import talentFrame from './talentFrame.vue'
import videoFrame from './videoFrame.vue'
import policyFrame from './policyFrame.vue'
import {
  getSpaceCompanyStatistics,
  getSpacePolicyStatistics,
  getSpaceTrainStatistics,
  getSpaceResume
} from '@/common/api/company.js'
import { getPolicys } from '@/common/api/policy.js'
import { getOnlineCourseList } from '@/common/api/training.js'
import { getTalentList } from '@/common/api/help.js'

export default {
  components: {
    talentFrame,
    videoFrame,
    policyFrame,
  },
  data() {
    return {
      totals: [
        {
          text: '政策申报',
          num: 0,
          color: 'rgba(4,93,185,0.98)',
          icon: require('@/assets/image/company/icon1.png'),
        },
        {
          text: '培训报名',
          num: 0,
          color: 'rgba(0,164,120,1)',
          icon: require('@/assets/image/company/icon2.png'),
        },
        {
          text: '获取简历',
          num: 0,
          color: 'rgba(246,61,17,1)',
          icon: require('@/assets/image/company/icon3.png'),
        },
        {
          text: '贷款申请',
          num: 0,
          color: 'rgba(239,140,34,1)',
          icon: require('@/assets/image/company/icon4.png'),
        },
      ],
      statistics: [
        {
          title: '政策服务',
          link: 'companySend',
          color: 'rgba(239,108,34,1)',
          list: [
            {
              icon: require('@/assets/image/company/icon5.png'),
              text: '申报中',
              num: 0,
            },
            {
              icon: require('@/assets/image/company/icon6.png'),
              text: '申报完成',
              num: 0,
            },
            {
              icon: require('@/assets/image/company/icon7.png'),
              text: '兑现中',
              num: 0,
            },
            {
              icon: require('@/assets/image/company/icon8.png'),
              text: '兑现完成',
              num: 0,
            },
          ],
        },
        {
          title: '我的培训',
          link: 'companyMyTraining',
          color: 'rgba(24,183,133,1)',
          list: [
            {
              icon: require('@/assets/image/company/icon9.png'),
              text: '已报名',
              num: 0,
            },
            {
              icon: require('@/assets/image/company/icon10.png'),
              text: '已参加',
              num: 0,
            },
            {
              icon: require('@/assets/image/company/icon11.png'),
              text: '待反馈',
              num: 0,
            },
          ],
        },
        {
          title: '用工需求',
          link: 'companyMyRecruit',
          color: 'rgba(219,60,23,1)',
          list: [
            {
              icon: require('@/assets/image/company/icon12.png'),
              text: '待发布',
              num: 0,
            },
            {
              icon: require('@/assets/image/company/icon13.png'),
              text: '招聘中',
              num: 0,
            },
            {
              icon: require('@/assets/image/company/icon14.png'),
              text: ' 已过期',
              num: 0,
            },
            {
              icon: require('@/assets/image/company/icon15.png'),
              text: '已招满',
              num: 0,
            },
          ],
        },
      ],
      policys: [],
      onlineCourseList: [], //在线课程列表
      talentList: [],
    }
  },
  mounted() {
    this.getPolicys()
    this.getOnlineCourseList()
    this.getTalentList()
    this.getSpaceCompany()
    this.getSpacePolicy()
    this.getSpaceTrain()
    this.getSpaceResume()
  },
  methods: {
    // 统计
    async getSpaceCompany() {
      let res = await getSpaceCompanyStatistics()
      //  policyApplyCount	申请政策统计数
      //  productApplyCount	贷款申请统计数
      //  resumeApplyCount	获取简历统计数
      //  trainApplyCount	培训报名统计数
      //  console.log('res',res.data)
      if (res.code == 200) {
        this.totals[0].num = res.data.policyApplyCount
        this.totals[3].num = res.data.productApplyCount
        this.totals[2].num = res.data.resumeApplyCount
        this.totals[1].num = res.data.trainApplyCount
      }
    },
    // 政策服务统计
    async getSpacePolicy() {
      let res = await getSpacePolicyStatistics()
      //  cashIn	兑现中
      //  cashComplete	兑现完成
      //  declareIn	申报中
      //  declareComplete	申报完成
      //  console.log('res',res.data)
      if (res.code == 200) {
        this.statistics[0].list[0].num = res.data.declareIn
        this.statistics[0].list[1].num = res.data.declareComplete
        this.statistics[0].list[2].num = res.data.cashIn
        this.statistics[0].list[3].num = res.data.cashComplete
      }
    },
    // 我的培训统计
    async getSpaceTrain() {
      let res = await getSpaceTrainStatistics()
      //  trainSignUpCount	已报名
      //  trainNoFeedbackCount	待反馈
      //  trainInCount	已参加
      if (res.code == 200) {
        this.statistics[1].list[0].num = res.data.trainSignUpCount
        this.statistics[1].list[1].num = res.data.trainInCount
        this.statistics[1].list[2].num = res.data.trainNoFeedbackCount
      }
    },
    // 用工需求统计
    async getSpaceResume() {
      let res = await getSpaceResume()
      //  noExamineCount	待审核
      //  noAdoptCount	未通过
      //  noApplyCount	待申请
      //  adoptCount	已通过
      //  fullCount	已招满
      if (res.code == 200) {
        this.statistics[2].list[0].num = res.data.noApplyCount
        this.statistics[2].list[1].num = res.data.noExamineCount
        this.statistics[2].list[2].num = res.data.adoptCount
        this.statistics[2].list[3].num = res.data.fullCount
      }
    },
    /**
     * 获取政策信息
     */
    async getPolicys() {
      let ns = this
      let data = {
        pageNum: 1,
        pageSize: 2
      }
      let res = await getPolicys(data)
      ns.policys = res.rows
      for (let i = 0; i < ns.policys.length; i++) {
        ns.policys[i].description = ns.policys[i].description.replace(
          /<[^<>]+>/g,
          ''
        )
      }
    },
    // 获取在线课程列表
    async getOnlineCourseList() {
      let params = {
        pageNum: 1,
        pageSize: 6,
      }
      const { code, msg, rows } = await getOnlineCourseList(params)
      if (code != '200') return this.$message.warning(msg)
      this.onlineCourseList = rows
    },
    // 获取人才列表
    async getTalentList() {
      let data = {
        pageNum: 1,
        pageSize: 3,
        education: '',
        quickSearch: '',
      }
      const { code, msg, rows } = await getTalentList(data)
      if (code != '200') return this.$message.warning(msg)
      this.talentList = rows
    },
    gotoList(url) {
      this.$router.push({ name: url })
    }
  }
}
</script>

<style scoped>
.title{
  margin-top:40px !important;
}
.iconStyle{
  width: 36px !important;
  height: 36px !important;
  margin-right: 10px;
}
.top-content {
  display: flex;
  justify-content: space-between;
}
.top-content .total {
  display: flex;
}
.top-content .left-div {
  width: 100%;
  margin-right: 28px;
}
.top-content .right-div {
  flex-shrink: 0;
  width: 280px;
  margin-top: -17px;
}
.titleDiv {
  color: #045db9;
  font-size: 20px;
  font-weight: bold;
  text-align: left;
  border-bottom: 2px solid #045db9;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 20px;
}
.flex-wrap {
  display: flex;
  justify-content: space-between;
}
.wrap-content {
  display: flex;
  justify-content: center;
  align-items: center;
}
.wrap-content img {
  width: 36px;
  height: 36px;
  margin-right: 10px;
}
.wrap-content .tip {
  text-align: left;
}
.more {
  font-size: 12px;
  color: #333333;
  font-weight: normal;
}
.more:hover {
  cursor: pointer;
  text-decoration: underline;
}

.videoList {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 100%;
}

.talentList {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 100%;
}
</style>